<template>
    <div>
        <div>{{ props.patient }}</div>
        <select v-model="patient.provinceCode">
            <option v-for="(p, index) in data.provinceList" :key="index" :value="p.code">{{ p.name }}</option>
        </select>列表长度：{{ data.provinceList.length }}
    </div>
</template>
<script setup lang="ts">
import { onMounted, reactive } from 'vue';
import type { AddressItem, PatientInfo } from './patient-info';
import * as service from './patient-service';


export interface Props {
    patient: PatientInfo
}

export interface Data{
    provinceList: AddressItem[]
}

const props = withDefaults(defineProps<Props>(), {
    patient: () => {
        return {}
    }
})

const data = reactive<Data>({
    provinceList: []
})

const getProvinceList = async () => {
    data.provinceList = await service.getProvinceList()
    console.log('provinceList length', data.provinceList.length)
}
onMounted(() => {
    getProvinceList()
})
</script>